<template>
  <div class="BoxLayout">
    <div class="BoxLayout--header">
      <div class="BoxLayout--header__title" v-if="!notitle">
        {{ title }}
      </div>
      <div class="BoxLayout--header__tap" v-else>
        <slot name="top-left"> </slot>
      </div>
      <div class="BoxLayout--header__right">
        <slot name="top-right"> </slot>
        <el-tooltip v-if="tips" :content="tips" placement="bottom">
          <span class="tips"></span>
        </el-tooltip>
      </div>
    </div>
    <div class="BoxLayout--content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup >
// import BtnGroups from '@/components/common/BtnGroupsTab.vue'
// 定义props属性
defineProps({
  notitle: {
    type: Boolean,
    default() {
      return false
    },
  },
  title: {
    type: String,
    default() {
      return '标题'
    },
  },
  tips: {
    type: String,
    default() {
      return ''
    },
  },
})
</script>

<style scoped lang="scss">
.BoxLayout {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(212, 212, 212, 1);
  background-color: #fff;

  &--header {
    height: 48px;
    padding: 0 16px 0 24px;
    background: rgba(241, 246, 250, 0.7);
    border-bottom: 1px solid #e9e9e9;

    &__title {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 500;
      line-height: 48px;
      float: left;

      &::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 16px;
        background: #2080f7;
        border-radius: 4px;
        margin-right: 8px;
        position: relative;
        top: 2px;
      }
    }

    &__tap {
      float: left;
    }

    &__right {
      height: 48px;
      line-height: 56px;
      float: right;

      .tips {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-image: url('@/assets/images/tips.png');
        background-size: cover;
      }
    }
  }

  &--content {
    flex: 1;
    min-height: 10px;
  }
}
</style>
<style lang="scss">
.BoxLayout {
  .BoxLayout--header__right {
    .BtnGroups {
      position: relative;
      top: -3px;
    }
  }

  .el-tabs__header {
    top: 7px;
  }

  .el-tabs__item {
    opacity: 0.9;
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #000000;
    text-align: center;
    line-height: 16px;
    font-weight: 500;
  }

  .el-tabs__item.is-active {
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #2080f7;
    text-align: center;
    line-height: 16px;
    font-weight: 500;
  }
}
</style>
